<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客-后台</title>
    <link rel="icon" href="../login/img/635池.png" type="image/x-icon">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../icon/iconfont.css">
</head>
<body>
    <div class="background">
        <div class="background-left">
            <div class="background-left-top">后台管理</div>
            <div class="background-middle">
                <i class="iconfont icon-xiangxia" id="icon-show"></i>
                <i class="iconfont icon-xiangshang" id="icon-hide" style="display: none;"></i>
            </div>
            <div class="background-left-bottom">
                <ul class="background-left-bottom-ul">
                    <li class="yonhuguanli"><i class="iconfont icon-yonghu"></i>用户管理</li>
                    <li class="wenzhangliebiao"><i class="iconfont icon-wenjianguanli"></i>文章管理</li>
                </ul>
            </div>
        </div>
        <div class="background-right" >
            <div class="background-right-top">
                <div class="switch">
                    <span class="iconfont icon-taiyang1"></span>
                    <div class="toggle">
                        <div class="circle"></div>
                    </div>
                    <span class="iconfont icon-yueliang1"></span>
                </div>
                <span class="background-right-top-span"><i class="iconfont icon-yonghu1 yonhu"></i> chixianqiu <i class="iconfont icon-xiangxia xiangxia"></i></span>
                <ul class="background-right-top-ul">
                    <li><i class="iconfont icon-bianji"></i>个人资料</li>
                    <li><i class="iconfont icon-qiehuanzhanghao"></i>切换账号</li>
                    <li><i class="iconfont icon-tuichu"></i>退出</li>
                </ul>
            </div>
            <div class="background-right-boottom" style="display: none;">
                <div class="background-right-boottom-top">
                    <div class="boottom-left">
                        <span class="boottom-left-span1">用户管理</span>
                        <span class="boottom-left-span2">用户列表</span>
                    </div>
                    <div class="boottom-right">
                        <span class="boottom-right-span1"><i class="iconfont icon-xinzengyonghu">新增用户</i></span>
                    </div>
                </div>
                <div class="background-right-boottom-boottom">
                    <table>
                        <thead>
                            <!--  表结构
                            CREATE TABLE user (
                                         id INT AUTO_INCREMENT PRIMARY KEY,
                                         username VARCHAR(255) NOT NULL,
                                         email VARCHAR(255) NOT NULL,
                                         password VARCHAR(255) NOT NULL,
                                         role VARCHAR(50) NOT NULL,
                                         status VARCHAR(50) NOT NULL
                            );
                             -->
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="userTableBody">
                            <!-- <tr>
                                <td>1</td>
                                <td>张三</td>
                                <td>zhangsan@example.com</td>
                                <td>管理员</td>
                                <td>启用</td>
                                <td><i class="iconfont icon-bianji bianji"></i> <i class="iconfont icon-shanchu shanchu"></i></td>
                            </tr> -->
                            <!-- 可以继续添加更多行 -->
                        </tbody>
                    </table>

                    <!-- 模态框 -->
                     <div class="boottom-xintian" style="display: none;">
                        <ul class="boottom-xintian-ul">
                            <h4>新增用户</h4>
                            <li><p>用户名：</p>
                                <input type="text" placeholder="   请输入用户名" class="username" name="username"></li>
                            <li><p>邮箱：</p>
                                <input type="email" placeholder="   请输入邮箱" class="email" name="email"></li>
                            <li><p>密码：</p>
                                <input type="password" placeholder="   请输入密码" class="password" name="password"></li>
                            <li><p>角色：</p>
                                    <input type="text" list="roles" placeholder="   请选择角色" required class="role" name="role">
                                    <datalist id="roles">
                                        <option value="用户">
                                        <option value="管理员">
                                    </datalist></li>
                            <li><p>状态：</p>
                                <input type="text" list="status" placeholder="   请选择状态" required class="status" name="status">
                                    <datalist id="status">
                                        <option value="启动">
                                        <option value="禁用">
                                    </datalist></li>
                            <li style="display: flex; justify-content: space-between; align-items: center;"><button class="queren">添加</button> <button class="xiugai">修改</button> <button class="quxiao">取消</button></li>
                        </ul>
                     </div>
                </div>
            </div>

            <div class="background-right-boottom-wenzhangguanli" style="display: none;">
                <div class="background-right-boottom-wenzhangguanli-top">
                    <div class="boottom-left">
                        <span class="boottom-left-span1">文章管理</span>
                        <span class="boottom-left-span2">文章列表</span>
                    </div>
                    <div class="wenzhangguanli-boottom-right">
                        <span class="boottom-right-span1"><i class="iconfont icon-bianjigerenziliao">发布文章</i></span>
                    </div>
                </div>

                <div class="wenzhangguanli-boottom-boottom">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>发布时间</th>
                                <th>作者</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="wenzhangguanli-userTableBody">
                            <!-- <tr>
                                <td>1</td>
                                <td>阿里巴巴体验</td>
                                <td>2020-01-01</td>
                                <td>张三</td>
                                <td><i class="iconfont icon-bianji bianji"></i> <i class="iconfont icon-shanchu shanchu"></i></td>
                            </tr> -->
                            <!-- 可以继续添加更多行 -->
                             <!--
                             CREATE TABLE articles (
                                    id INT AUTO_INCREMENT PRIMARY KEY,
                                    title VARCHAR(255) NOT NULL,
                                    author VARCHAR(255) NOT NULL,
                                    status VARCHAR(50) NOT NULL,
                                    category VARCHAR(255) NOT NULL,
                                    content TEXT NOT NULL
                                ); 
                             -->
                        </tbody>
                    </table>

                    <!-- 模态框 -->
                    <div class="wenzhangguanli-xintian" style="display: none;">
                        <ul class="wenzhangguanli-xintian-ul">
                            <h4>发布文章</h4>
                            <li><p>标题：</p>
                                <input type="text" placeholder="   请输入文章标题" class="title" name="title"></li>
                            <li><p>作者：</p>
                                <input type="text" class="author" name="author"></li>
                            <li><p>发布时间：</p>
                                <input type="date" class="publishDate" name="publishDate"></li>
                            <li><p>文章封面：</p>
                                <input type="file" class="category" name="category"></li>
                            <li><p>内容：</p>
                                <textarea class="content" name="content"></textarea></li>
                            <li style="display: flex; justify-content: space-between; align-items: center;"><button class="rentian">添加</button> <button class="gaixiu">修改</button> <button class="xiaoqu">取消</button></li>
                        </ul>
                     </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>